<!-- 新增认证项目 -->

<template>
  <a-modal
    :width="550"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> {{ props.title }} </template>
    <a-space :size="70" direction="vertical" fill>
      <div>
        <a-form :model="form" auto-label-width>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="roleName" label="认证项目名称:">
                <a-input
                  placeholder="请输入名称"
                  v-model="form.Name"
                  allow-clear
                ></a-input> </a-form-item></a-col
          ></a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item field="roleCode" label="项目描述:">
                <a-textarea
                  placeholder="Please enter something"
                  allow-clear
                  v-model="form.Des"
                /> </a-form-item></a-col
          ></a-row>
        </a-form>
      </div>
    </a-space>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect } from 'vue';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    defineProps<{
      title: string;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addProject']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // let form = ref(cloneDeep(props.formData));

  const form = ref({
    Name: '',
    Des: '',
  });

  watchEffect(() => {
    if (modalVisible.value) {
      form.value = {
        Name: '',
        Des: '',
      };
    }
  });

  const rules = reactive({});

  // 确定
  const handleOk = async () => {
    emit('addProject', form.value);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
